<html>
   <head>
      <title>Symmetry Object Visualizer</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="GE3-GITVersion" content="3.4.0">

      <link rel="icon" type="image/png" href="./images/favicon.png"></link>
      <link rel="stylesheet" href="./style/fonts.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/sliders.css" type="text/css"></link>
      <link rel="stylesheet" href="./visualizerFramework/visualizer.css" type="text/css"></link>
      <link rel="stylesheet" href="./style/menu.css" type="text/css"></link>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
       #control {
           padding: 0.2em;
       }
      </style>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="./refreshVersion.js"></script>
      <script type="module">
       import {check} from './js/Migration.js'
       import {load} from './SymmetryObject.js'
       window.addEventListener('load', () => check().then(load))
      </script>
   </head>
   <body>
      <div id="bodyDouble">
         <div id="header">
             <div id="heading"></div>
         </div>
         <div id="graphic">
         <div id="controls"><div id="control">
            <div style="margin: 1em 0 0.5em 0">View this symmetry object:</div>
            <div id="diagram-select" class="faux-select" style="margin-bottom: 1em"
                 onclick="$(this).find('.faux-select-options').toggle(); event.stopPropagation()">
               <div class="faux-select-arrow"></div>
               <div id="diagram-choice" class="faux-select-value"></div>
               <ol id="diagram-choices" class="faux-select-options hidden display-none-on-clean"></ol>
            </div>
            <template id="diagram-choice-template">
                <span data-symmetry-object-index="${index}">${symmetryObject.name}</span>
            </template>

            <div>Zoom level:
               <input id="zoom-level" type="range" min="-10" max="10" value="0">
            </div>

            <div>Line thickness:
               <input id="line-thickness" type="range" min="1" max="20" value="10">
            </div>

            <div>Node radius:
               <input id="node-radius" type="range" min="-10" max="10" value="0">
            </div>

            <div><input id="use-fog" type="checkbox">Use this much fog:
               <input id="fog-level" type="range" min="1" max="10" value="5">
            </div>
         </div>
         </div></div>
      </div>
   </body>
</html>
